﻿@model ContactUsModel

@{
    Assets.AppendTitleParts(Model.MetaTitle.HasValue() ? Model.MetaTitle : T("PageTitle.ContactUs").Value);
    Assets.AppendMetaDescriptionParts(Model.MetaDescription);
    Assets.AppendMetaKeywordsParts(Model.MetaKeywords);
}

<div class="page contact-page">
    <div class="page-body">
        <zone name="contactus_top"></zone>

        <div class="row">
            <div class="col-md-6">
                <div class="page-title">
                    <h1 class="h2">@T("PageTitle.ContactUs")</h1>
                </div>
                @await Component.InvokeAsync("TopicBlock", new { systemName = "ContactUs", isLead = true, bodyOnly = true })
            </div>
            <div class="col-md-6">
                @if (Model.SuccessfullySent)
                {
                    <div class="alert alert-success" role="alert">
                        @Model.Result
                    </div>
                }
                else
                {
                    <form asp-route="ContactUs" method="post" id="contact-form" class="contact-form">
                        <div asp-validation-summary="ModelOnly"></div>

                        <honeypot />

                        <div class="form-floating mb-3">
                            <input asp-for="FullName" 
                                   sm-required="Model.FullNameRequired"
                                   class="remember remember-disallow-empty" 
                                   placeholder="@Html.DisplayNameFor(x => x.FullName)"
                                   autocomplete="name" />
                            <label asp-for="FullName" attr-class='(Model.FullNameRequired, "required")'></label>
                            <span asp-validation-for="FullName"></span>
                        </div>

                        <div class="form-floating mb-3">
                            <input asp-for="Email" 
                                   sm-required="true" 
                                   class="remember remember-disallow-empty" 
                                   placeholder="@Html.DisplayNameFor(x => x.Email)"
                                   autocomplete="email" />
                            <label asp-for="Email" class="required"></label>
                            <span asp-validation-for="Email"></span>
                        </div>

                        <div class="form-floating mb-2">
                            <textarea asp-for="Enquiry" placeholder="@T("ContactUs.Enquiry.Hint")" class="personal-message remember remember-disallow-empty" style="height: 150px"></textarea>
                            <label asp-for="Enquiry" class="required">@T("ContactUs.Enquiry.Hint")</label>
                            <span asp-validation-for="Enquiry"></span>
                        </div>

                        <div class="text-muted mb-3">
                            @T("Common.FormFields.Required.Hint")
                        </div>

                        <zone name="gdpr_consent" />

                        <captcha sm-target="ContactUs" class="mt-3" />

                        <button type="submit" name="send-email" class="btn btn-primary btn-lg mt-3">
                            @T("ContactUs.Button")
                        </button>
                    </form>
                }
            </div>
        </div>

        <zone name="contactus_bottom"></zone>
    </div>
</div>

<script sm-target-zone="scripts" data-origin="contact-us">
    $(function () {
        restoreRememberedFormFields("registerVals");
        const form = document.getElementById('contact-form');
        if (form) {
            form.addEventListener('focusout', (event) => {
                rememberFormFields("contact-form", "registerVals");
            });
        }
    });
</script>